<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>京苏易购电子商务</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="adminlte/plugins/fontawesome-free/css/all.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <!-- DataTables -->
    <link rel="stylesheet" href="adminlte/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="adminlte/plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="adminlte/css/adminlte.min.css">
    <!-- Google Font: Source Sans Pro -->
    <link rel="stylesheet" href="../adminlte/css/SourceSans.css">

    <link type="text/css" href="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.12/css/dataTables.checkboxes.css" rel="stylesheet" />
</head>


<body class="hold-transition sidebar-mini">
<div class="wrapper">
    <!-- /.navbar -->

    <!-- Main Sidebar Container -->
    <aside class="main-sidebar sidebar-dark-primary elevation-4">
        <!-- Brand Logo -->
        <a href="index3.html" class="brand-link">
            <img src="adminlte/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3"
                 style="opacity: .8">
            <span class="brand-text font-weight-light">帷易胜(JD)商品管理</span>
        </a>

        <!-- Sidebar -->
        <div class="sidebar">


            <!-- Sidebar Menu -->
            <nav class="mt-2">
                <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
                    <!-- Add icons to the links using the .nav-icon class
                         with font-awesome or any other icon font library -->


                    <li class="nav-item active">
                        <a href="productapply.html" class="nav-link active">
                            <!--<i class="nav-icon fas fa-th"></i>-->
                            <p>
                                申请商品列表
                            </p>
                        </a>
                    </li>

                </ul>
            </nav>
            <!-- /.sidebar-menu -->
        </div>
        <!-- /.sidebar -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-left">
                            <li class="breadcrumb-item"><a href="#">主页</a></li>
                            <li class="breadcrumb-item active">申请商品列表</li>
                        </ol>
                    </div>
                </div>
            </div><!-- /.container-fluid -->
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">申请商品列表</h3>
                            </div>
                            <!-- /.card-header -->
                            <div class="card-body">


                                <table id="example" class="display" cellspacing="0" width="100%">
                                    <thead>
                                    <tr>
                                        <th>申请ID</th>
                                        <th>商品名称</th>
                                        <th>商品ID</th>
                                        <th>提交时间</th>
                                        <th>状态</th>
                                    </tr>
                                    </thead>
                                    <tfoot>
                                    <tr>
                                        <th>申请ID</th>
                                        <th>商品名称</th>
                                        <th>商品ID</th>
                                        <th>提交时间</th>
                                        <th>状态</th>
                                    </tr>
                                    </tfoot>
                                </table>

                            </div>
                            <!-- /.card-body -->
                        </div>
                        <!-- /.card -->
                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.container-fluid -->
        </section>
        <!-- /.content -->
    </div>

    <!-- Control Sidebar -->
    <aside class="control-sidebar control-sidebar-dark">
        <!-- Control sidebar content goes here -->
    </aside>
    <!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->

<!-- jQuery -->
<script src="adminlte/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="adminlte/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- DataTables -->
<script src="adminlte/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="adminlte/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
<script src="adminlte/plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
<script src="adminlte/plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>


<script type="text/javascript" src="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.12/js/dataTables.checkboxes.min.js"></script>

<script>

    $(document).ready(function (){
        var table = $('#example').DataTable({

            serverSide: true,
            ajax: {
                url: "/productapplies"
                // dataFilter: function(data){
                //     return data; // return JSON string
                // }
            },


            columns: [
                {"data": "APPLYID", "width": "10px"},
                {"data": "NAME", "width": "500px"},
                {"data": "WAREID", "width": "100px"},
                {"data": "SUBMIT_TIME", "width": "80px"},
                {"data": "STATE", "width": "50px",
                    render: function(data, type, row, meta) {
                        //然后是 内容太多用。。。。表示、内容不换行，鼠标移上去显示详情
                        //这类问题最简单的肯定是使用css解决
                        //    //1. table-layout: fixed 由于table-layout的默认值是auto，
                        //即table的宽高将取决于其内容的多寡，如果内容的体积无法估测，那么最终表格的呈现形式也无法保证了，
                        //fixed一下就好了。（注意：此样式是关键）
                        //    //2. white-space: nowrap 是为了保证无论单元格（TD）中文本内容有多少，
                        //都不会自动换行，此时多余的内容会在水平方向撑破单元格。
                        //    //3. overflow: hidden 隐藏超出单元格的部分。
                        //    //4. text-overflow: ellipsis 将被隐藏的那部分用省略号代替。
                        //这4个css样式都可以百度出来的,第一个是写在table标签里面的,2、3、4写在td里面
                        //假设这个tomuchcontent 就是本列的值 data
                        var tomuchcontent = "asdasdaddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd";
                        //我这里做个简单的示范


                        var map = {
                            302:"待采销审核",
                            304: "待产品审核",
                            306: "审核通过",
                            303: "采销驳回",
                            305: "产品驳回",
                            309: "待经理审核",
                            310: "经理驳回",
                            311: "待总监审核",
                            312: "总监驳回",
                            313: "待质量管理部审核",
                            320: "质量管理部驳",
                            321: "待质量负责人审核",
                            322: "质量负责人驳回"
                        };

                        return   map[data] || data;
                    }
                }]

        });


    });

</script>
</body>
</html>
